<template>
  <view class="search">
    <uv-search placeholder="请输入搜索内容" v-model="keyword" @search="handleSearch" @custom="handleSearch"></uv-search>
    <view class="history-title">
      <text class="txt">历史搜索</text>
      <image class="img" @click="clearHistory" src="../../static/images/del.png" mode=""></image>
    </view>
    <view class="history-body">
      <view class="menu" v-if="history && history.length>0">
        <view class="menu-item" v-for="(item, index) in history" :key="index" @click="search(item)">
          {{item.name}}
        </view>
      </view>
      <uv-empty mode="history" v-else></uv-empty>
    </view>
    <uv-modal ref="modal" align="center" title="" content='确定清除历史记录?' @confirm="confirm" :showCancelButton="true"
      @cancel="cancel"></uv-modal>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        keyword: "",
        history: []
      }
    },
    onShow() {
      this.loadHistory();
    },
    methods: {
      loadHistory() {
        const history = uni.getStorageSync('search_history');
        if (history) {
          this.history = history;
        }
        console.log("历史记录缓存", this.history);
      },
      handleSearch() {
        if (!this.keyword) {
          uni.showToast({
            title: "搜索内容不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        } else {
          let history = uni.getStorageSync('search_history') || [];
          history.unshift({
            name: this.keyword
          });
          history = Array.from(new Set(history)); // 去除重复项
          history = history.slice(0, 10); // 限制最多记录数
          uni.setStorageSync('search_history', history);
          uni.navigateTo({
            url: '/pages/home/searchResult?keyword=' + encodeURIComponent(this.keyword),
          });
          this.keyword = "";
        }
      },
      search(item) {
        uni.navigateTo({
          url: '/pages/home/searchResult?keyword=' + encodeURIComponent(item.name),
        });
      },
      clearHistory() {
        this.$refs.modal.open();
      },
      confirm() {
        uni.removeStorageSync("search_history");
        this.history = [];
        this.$refs.modal.close();
      },
      cancel() {
        this.$refs.modal.close();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .search {
    width: 100vw;
    height: 100vh;
    background: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .history-title {
      margin: 30rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .txt {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #222222;
      }

      .img {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .history-body {
      .menu {
        display: flex;
        flex-wrap: wrap;

        .menu-item {
          padding: 5rpx 20rpx;
          background: #F7F7F7;
          border-radius: 200rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          margin-right: 12rpx;
          margin-bottom: 20rpx;
        }
      }
    }
  }
</style>